<template>
  <transition name="fade-opacity">
    <section v-show="showCouponModal" @click.self="closeModal" class="c-pz1003 c-w100 c-h c-pf c-p-l0 c-p-t0 c-translucent-balck50 c-flex-row c-justify-center c-aligni-end">
      <transition name="fade-translate-y">
        <div v-show="showCouponModal" class="c-w100 c-flex-column c-pb40 c-bg-coupon c-p">
          <div class="c-flex-row c-flex-center c-w100 c-hh80 c-fs28 c-fc-xblack c-bg-white">选择优惠券</div>
          <div class="close" @click="closeModal"><span class="iconfont c-fs24 c-fc-gray">&#xe61b;</span></div>
          <article class="c-bg-coupon c-maxh600 c-ph24 c-pv30 c-contexty-scroll">
            <!-- 可用优惠券列表 -->
            <div @click="clickCoupon(index)" class="c-flex-row c-mb20" v-for="(item, index) in couponList" :key="index">
              <div v-if="item.type == 4" class="c-hh150 c-ww150 c-flex-shrink0 exchange-left c-flex-row c-flex-center c-fs34 c-fc-white">抵价券</div>
              <div v-else class="c-hh150 c-ww150 c-flex-shrink0 exchange-left">
                <div v-if="item.type == 5" class="c-fs40 c-fc-white c-textAlign-c c-text-ellipsis1 c-mt36">{{ Number(item.price) }}<span class="c-fs20">折</span></div>
                <div v-else class="c-fs40 c-fc-white c-textAlign-c c-text-ellipsis1 c-mt36">
                  <span class="c-fs20">{{ '￥' | iosPriceFilter }}</span
                  >{{ Number(item.price).toFixed(0) }}
                </div>
                <div class="c-fs20 c-fc-white c-textAlign-c c-text-ellipsis1 c-mt8">
                  {{ item.couponType == 2 ? '代金券' : item.type == 3 ? '满' + Number(item.amount).toFixed(0) + '元可使用' : item.type == 2 ? '无门槛' : item.type == 5 ? '折扣券' : '抵用券' }}
                </div>
              </div>
              <div class="c-hh150 c-bg-white c-flex-grow1 c-text-hidden c-flex-column c-justify-sb c-pv20">
                <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-ph20">{{ item.name }}</div>
                <div class="c-flex-row c-aligni-center c-justify-sb c-ph20">
                  <div class="c-fs20 c-fc-gray c-text-ellipsis1">{{ item.startAt.replace(/-/g, '.').split(' ')[0] }} - {{ item.endAt.replace(/-/g, '.').split(' ')[0] }}</div>
                  <div :class="item.rcdId == choosedCouponId ? 'theme-fc' : 'c-fc-gray'" class="iconfont c-fs32 c-ww50 c-flex-shrink0 c-aligni-center c-flex-row c-justify-end">&#xe82e;</div>
                </div>
                <div class="c-fs20 c-fc-gray c-text-ellipsis1 c-ph20">
                  {{item | couponApplyText}}{{ item.couponType == 2 && item.sRealName ? '(' + item.sRealName + '分享)' : '' }}
                </div>
              </div>
            </div>
          </article>
        </div>
      </transition>
    </section>
  </transition>
</template>

<script>
export default {
  props: {
    showCouponModal: {
      type: Boolean,
      default: false
    },
    couponList: {
      type: Array,
      default: () => []
    },
    choosedCouponId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      theme: localStorage.getItem('colorName') || 'mb5_default'
    };
  },

  computed: {},
  methods: {
    closeModal: function(e) {
      this.$emit('update:showCouponModal', false);
    },
    clickCoupon(index) {
      this.$emit('chooseCoupon', index);
    }
  },
  activated() {},
  deactivated() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c-bg-coupon {
  background-color: #f4f7f9;
}
.exchange-left {
  background: url('../../../../../public/i/wap/coupon/coupon_left.png') no-repeat 100%;
  background-size: 100% 100%;
}
.close {
  position: absolute;
  right: 0.6rem;
  top: 0.4rem;
}
</style>
